// 导入重置样式
require("../../assets/css/reset.css");
// 引入公共样式
require("../../assets/css/basic.css");
// 引入矢量图
require("../../assets/fonts/iconfont.css");
// 引入当前页面的样式
require('./mine_modify.less');

// 引入dom
const dom = require("../../utils/dom.js");
// 引入axios模块
const axios = require("../../utils/axios.js");

window.addEventListener("DOMContentLoaded", function(){
    // 1.点击个人资料箭头返回上一页
    dom.get(".lt").addEventListener("click", function(){
        history.back();
    })

    // 2.点击显示性别选择框
    dom.get("#gender").addEventListener('click', function () {
        weui.picker([{
            label: '男',
            value: 0
        }, {
            label: '女',
            value: 1
        }, {
            label: '保密',
            value: 2
        }], {
            onConfirm: function (result) {
                dom.get("#gender").textContent = result[0].label;
                dom.get("#gender").dataset.value = result[0].value;
            },
            title: '选择性别'
        });
    });

    // 3.点击选择生日
    dom.get("#birthday").addEventListener('click', function () {
        weui.datePicker({
            start: 1900,
            end: new Date().getFullYear(),
            onConfirm: function (result) {
                let birthday= result.map(function(v){
                    return v.value;
                });
                dom.get("#birthday").textContent = birthday.join("-");
            },
            title: '选择诞生日期'
        });
    });

    // 4.点击选择所在省份选择框
    let provinceId = "";
    dom.get("#provinceId").addEventListener('click', function () {
        // 发送请求给后端拿省份的数据
        axios.get("/api/shared/province").then(response => {
            let provinceIdArr = response.data.data.map(function(v){
                return {label: v.name, value: v.id}                
            })
            weui.picker(provinceIdArr, {
                onConfirm: function (result) {
                    dom.get("#provinceId").textContent = result[0].label;
                    dom.get("#provinceId").dataset.value = result[0].value;
                    provinceId = result[0].value;
                },
                title: '选择所在省份'
            });
        })
    });

    // 5.点击选择所在城市选择框
    dom.get("#cityId").addEventListener('click', function () {
        // 判断所在城市有没有值，如果有就发送请求给后端拿城市的数据  如果没有就提示
        if(!provinceId){
            alert("请选择所在省份");
            return;  //如果没有选择城市那就return出去  不再执行下面代码
        }
        
        axios.get("/api/shared/city?provinceId=" + provinceId).then(res => {
            let cityIdArr = res.data.data.map(function(v){
                return {label: v.name, value: v.id};
            })
            weui.picker(cityIdArr, {
                onConfirm: function (result) {
                    dom.get("#cityId").textContent = result[0].label;
                    dom.get("#cityId").dataset.value = result[0].value;
                },
                title: '选择所在城市'
            });
        })
    });

    // 6.上传头像
    dom.get(".weui-cells input").addEventListener("change", function(){
        // 文件上传有一个属性是.files
        // console.log(this.files[0])
        // 需要使用FormData来传数据
        // 创建一个FormData对象，然后调用它的append()方法来添加字段（FormData是一个构造函数是一个类）
        let formData =  new FormData();
        formData.append("file", this.files[0]);
        // 发请求拿数据
        axios.post("/api/shared/uploadPortrait",formData).then(res => {
            // console.log(res.data.data.url)
            if(res.data.errno === 0){
                dom.get("#img").src = axios.defaults.baseURL + res.data.data.url;
                dom.get("#img").dataset.value = res.data.data.url;
            }else{
                alert(res.data.message)
            }
        })
    })

    // 7.个人简介输入框
    dom.get("textarea").addEventListener("input",function(){
        dom.get("#text").textContent = dom.get("textarea").value.length;
        dom.get("#text").dataset.value = dom.get("textarea").value;
    })

    // 8.上传个人资料
    dom.get("#messageBtn").addEventListener("click", function(){
        // 获取用户名的值
        let nickName = dom.get("#userinput").value;
        // 获取性别
        let gender = Number(dom.get("#gender").dataset.value);
        // 获取省份Number
        let provinceId = Number(dom.get("#provinceId").dataset.value);
        // 获取城市Number
        let cityId = Number(dom.get("#cityId").dataset.value);
        // 获取生日
        let birthday = dom.get("#birthday").textContent;
        // 获取头像
        let imgUrl = dom.get("#img").dataset.value;
        // 获取个人简介
        let sign = dom.get("#text").dataset.value;
        
        // 发送请求
        axios.post("/api/user/changeInfo",{
            nickName: nickName,
            gender,
            provinceId,
            cityId,
            birthday,
            imgUrl,
            sign,
        }).then(res => {
            if(res.data.errno === 0){
                localStorage.setItem("token", res.data.data.token);
                alert("信息修改成功！");
                location.href = "mine.html";
            }else{
                alert(res.data.data.message);
            }
        })
    })

    // 9.数据回填
    axios.get("/api/user/info").then(async (res) => {
        // 头像
        dom.get("#img").src = axios.defaults.baseURL + res.data.data.imgUrl;
        // 昵称
        dom.get("#userinput").value = res.data.data.nickName;
        // 性别
        let genderArr = ["男", "女", "保密"];
        dom.get("#gender").textContent = genderArr[res.data.data.gender] || "未选择";
        // 生日
        dom.get("#birthday").textContent = res.data.data.birthday;
        // 所在省份
        let pro = await axios.get("/api/shared/province")
        let [provinceId] = pro.data.data.filter(v => v.id === res.data.data.provinceId);
        // console.log(provinceId.name)
        dom.get("#provinceId").textContent = provinceId.name || "未选择";
        // 所在城市
        let city = await axios.get("/api/shared/city?provinceId=" + res.data.data.provinceId);
        let [cityName] = city.data.data.filter(v => v.id === res.data.data.cityId);
        dom.get("#cityId").textContent = cityName.name || "选择";
        // 个人简介
        dom.get("textarea").value = res.data.data.sign;
        dom.get("#text").textContent = dom.get("textarea").value.length;
    })
})
